<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

</head>

<body style="text-align:center; margin-top:100px;">

<canvas id="hls" width="400" height="300" style="background:#FFF;border:#000 1px solid;"></canvas>

</body>
<script>
var c=document.getElementById("hls");  //获取画布
var cxt=c.getContext("2d");	//获取****
var x=10;	//初始化坐标
var ok=false;	//判断直线位置

//画直线1
function draw(){
	cxt.beginPath();
	cxt.moveTo(x,10);	//起点
	cxt.lineTo(x,290);		//末点
	cxt.stroke();

}

//画直线2
function draw2(){
	cxt.beginPath();
	cxt.moveTo(x+8,10);	//起点
	cxt.lineTo(x+8,290);		//末点
	cxt.stroke();

}
//初始化定时器
var t=null;

//定义方法
function scan(){

	//10毫秒执行一次
	t=setInterval(function(){
	cxt.clearRect(0,0,c.width,c.height);	//每次清空上次画布
	draw(); 	//画本次直线1
	draw2();	//画本次直线2

	if(!ok){	//ok为false，直线到达左边
		x++;	//直线右移动1位
	}
	else{	//ok为true，直线到达右边
		x--;	//直线左移动1位
	}

	if(x>390) ok=true;		//直线到达右边（即将左移动），ok为true
	if(x<=10) ok=false;		//直线到达左边（即将右移动），ok为false

	},10)
}

scan();		//调用函数执行

</script>
</html>

